<template>
  <a-modal
    title="职位编辑"
    :width="900"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item
          style="display: none"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input v-decorator="['id']" />
        </a-form-item>

        <a-form-item
          label="职位名称"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input
            placeholder="请输入职位名称"
            v-decorator="[
              'name',
              { rules: [{ required: true, message: '请输入职位名称！' }] },
            ]"
          />
        </a-form-item>

        <a-form-item
          label="唯一编码"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-input
            placeholder="请输入唯一编码"
            v-decorator="[
              'code',
              { rules: [{ required: true, message: '请输入唯一编码！' }] },
            ]"
          />
        </a-form-item>

        <a-form-item
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          label="排序"
          has-feedback
        >
          <a-input-number
            style="width: 100%"
            placeholder="请输入排序"
            v-decorator="['sort', { initialValue: 100 }]"
            :min="1"
            :max="1000"
          />
        </a-form-item>

        <a-form-item
          label="备注"
          :labelCol="labelCol"
          :wrapperCol="wrapperCol"
          has-feedback
        >
          <a-textarea
            :rows="4"
            placeholder="请输入备注"
            v-decorator="['remark']"
          >
          </a-textarea>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
//   import { sysPosEdit } from '@/api/modular/system/posManage'

export default {
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 },
      },
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
    };
  },
  methods: {
    // 初始化方法
    edit(record) {
      this.visible = true;
      setTimeout(() => {
        this.form.setFieldsValue({
          id: record.id,
          name: record.name,
          code: record.code,
          sort: record.sort,
          remark: record.remark,
        });
      }, 100);
    },

    handleSubmit() {
      const {
        form: { validateFields },
      } = this;
      this.confirmLoading = true;
      validateFields((errors, values) => {
        console.log(values);
        if (!errors) {
          // sysPosEdit(values).then((res) => {
          //   if (res.success) {
          //     this.$message.success('编辑成功')
          //     this.visible = false
          //     this.confirmLoading = false
          //     this.$emit('ok', values)
          //     this.form.resetFields()
          //   } else {
          //     this.$message.error('编辑失败：' + res.message)
          //   }
          // }).finally((res) => {
          //   this.confirmLoading = false
          // })
        } else {
          this.confirmLoading = false;
        }
      });
    },
    handleCancel() {
      this.form.resetFields();
      this.visible = false;
    },
  },
};
</script>
